{% extends "base.html" %}
{% block title %} 找回密码 {% endblock %}
{% block head %}
    <style>
        .login_register_box {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 10px #eeeeee;
            padding: 20px 40px;
            margin-top: 35px;
        }
    </style>
{% endblock %}
{% block body %}
    <div style="display: flex;justify-content: center;align-items: center;">
        <div id="message" class="alert alert-success alert-dismissible" role="alert"
             style="display:none;text-align: center;width: 400px;position: absolute;left: 655px;top: 100px">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <strong>已向您绑定的邮箱发送了验证码，请在一分钟内填写</strong>
        </div>
        {# 密码form表单 #}
        <section class="login_register_box">
            <div style="text-align: center"><h2 style="font-weight: bold">密码找回</h2></div>
            <form action="{{ url_for("business.missPassword") }}" method="post">
                <div class="form-group">
                    <label for="Account">{{ form.account.label }}</label>
                    {% if form.account.data == none %}
                        <input class="form-control" id="Account" name="{{ form.account.name }}" placeholder="account">
                    {% else %}
                        <input class="form-control" id="Account" name="{{ form.account.name }}"
                               value="{{ form.account.data }}">
                    {% endif %}
                </div>
                <div class="form-group">
                    <label for="Newpassword">{{ form.newPassword.label }}</label>
                    {% if form.newPassword.data == none %}
                        <input class="form-control" id="Newpassword" name="{{ form.newPassword.name }}"
                               placeholder="new password">
                    {% else %}
                        <input class="form-control" id="Newpassword" name="{{ form.newPassword.name }}"
                               value="{{ form.newPassword.data }}">
                    {% endif %}
                </div>
                <div class="form-group">
                    <label for="EmailCode">{{ form.emailCode.label }}</label>
                    <div class="row">
                        <div class="col-xs-7">
                            {% if form.emailCode.data == none %}
                                <input class="form-control" id="EmailCode" name="{{ form.emailCode.name }}"
                                       placeholder="verification code">
                            {% else %}
                                <input class="form-control" id="EmailCode" name="{{ form.emailCode.name }}"
                                       value="{{ form.emailCode.data }}">
                            {% endif %}
                        </div>
                        <div class="col-xs-5">
                            <button type="button" id="EmailCode_button" class="btn btn-primary" style="width: 100px;">
                                发送
                            </button>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-primary form-control">提交</button>
            </form>
            <ul style="padding-left: 0">
                {% for message in get_flashed_messages() %}
                    <li style="color: red">{{ message }}</li>
                {% endfor %}
            </ul>
            <div style="margin-top: 15px">
                <div style="float: right">
                    <a href="{{ url_for("business.login") }}">
                        <i data-text="fa-mail-reply" class=" fa fa-mail-reply js-copy"></i>
                        返回登录
                    </a>
                </div>
                <div style="clear: both"></div>
            </div>
        </section>
    </div>

{% endblock %}
{% block js %}
    <script>
        $(function () {
            //监听邮箱验证码发送按钮
            listeningEmailCode();
        })

        function listeningEmailCode() {
            $("#EmailCode_button").on("click", function () {
                $.ajax({
                    url: "{{ url_for("business.getEmailCode") }}",
                    method: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({'account': $("#Account").val()}),
                    success: function (res) {
                        console.log(res)
                        if (res.status === "success") {
                            EmailCodeSuccess();
                        } else if (res.status === "fail") {
                            alert(res.message);
                            //让账号输入框获得焦点，自动取消button按钮的选中
                            $("input[name='account']").focus();
                        }
                    }
                });
            })
        }

        function EmailCodeSuccess() {
            //显示发送成功的提示框
            $("#message").css("display", "block");
            window.setTimeout(function () {//对提示框设置关闭时间
                $('[data-dismiss="alert"]').alert('close')
            }, 3000)
            $("#EmailCode_button").removeClass("btn-primary");
            $("#EmailCode_button").addClass("btn-success");
            $("#EmailCode_button").attr('disabled', true);//该按钮不可被点击
            var seconds = 60;//设置倒计时，60秒
            var timer = null;//设置定时器
            timer = setInterval(show, 1000);

            function show() {//开启定时器后要执行的函数
                if (seconds === 0) {
                    $("#EmailCode_button").removeClass("btn-danger");
                    $("#EmailCode_button").addClass("btn-primary");//改变样式
                    clearInterval(timer);//清除定时器
                    $("#EmailCode_button").text("重发");
                    $("#EmailCode_button").attr('disabled', false);//该按钮又可被点击
                } else if (seconds < 10) {
                    if (seconds === 9) {
                        $("#EmailCode_button").removeClass("btn-success");
                        $("#EmailCode_button").addClass("btn-danger");//改变样式
                    }
                    $("#EmailCode_button").text(seconds).css("font-weight", "bolder");//将不断变化的秒数显示在页面上
                } else {
                    $("#EmailCode_button").text(seconds).css("font-weight", "bolder");//将不断变化的秒数显示在页面上
                }
                seconds--;
            }
        }
    </script>
{% endblock %}
